<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>预约中订单</title>
<link rel="stylesheet" href="<%=path %>/css/amazeui.min.css" />
<link rel="stylesheet" href="<%=path %>/css/wgj_style.css" />
<script type="text/javascript" src="<%=path %>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/amazeui.min.js"></script>
<!--******弹出窗口开始******-->
<script type="text/javascript">
	function showid(idname){
		var isIE = (document.all) ? true : false;
		var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
		var newbox=document.getElementById(idname);
		newbox.style.zIndex="9999";
		newbox.style.display="block"
		newbox.style.position = !isIE6 ? "fixed" : "absolute";
		newbox.style.top =newbox.style.left = "50%";
		newbox.style.marginTop = - newbox.offsetHeight / 2 + "px";
		newbox.style.marginLeft = - newbox.offsetWidth / 2 + "px";  
		var layer=document.createElement("div");
		layer.id="layer";
		layer.style.width=layer.style.height="100%";
		layer.style.position= !isIE6 ? "fixed" : "absolute";
		layer.style.top=layer.style.left=0;
		layer.style.backgroundColor="#000";
		layer.style.zIndex="9998";
		layer.style.opacity="0.6";
		document.body.appendChild(layer);
		var sel=document.getElementsByTagName("select");
		for(var i=0;i<sel.length;i++){        
			sel[i].style.visibility="hidden";
		}
		function layer_iestyle(){      
			layer.style.width=Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)
			+ "px";
			layer.style.height= Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +
			"px";
		}
		function newbox_iestyle(){      
			newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";
			newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";
		}
		if(isIE){layer.style.filter ="alpha(opacity=60)";}
		if(isIE6){  
			layer_iestyle()
			newbox_iestyle();
			window.attachEvent("onscroll",function(){                              
				newbox_iestyle();
			})
			window.attachEvent("onresize",layer_iestyle)          
		}  
		layer.onclick=function(){
			newbox.style.display="none";
			layer.style.display="none";
			for(var i=0;i<sel.length;i++){
				sel[i].style.visibility="visible";
			}
		}
	}
	
	function cancel(id){
		var cancelDoc=$("#cancelDoc").val();
		var url="<%=path%>/reserveHour/reserveHourCancel?id="+id+"&cancelDoc="+cancelDoc;
		window.location.href=url;
	}
</script>
<!--******弹出登录结束******-->
</head>

<body>
<section id="Content">
  	<div class="ddxq">
    	<h2>订单详情</h2>
        <ul>
        	<li><label for="">用车人：</label>${hour.clientName }</li>
            <li><label for="">联系电话：</label>${hour.clientPhone }</li>
            <li><label for="">车型：</label>${hour.carType }</li>
            <li><label for="">时租价格：</label>${hour.hourFee }元/小时</li>
            <li><label for="">时限里程：</label>${hour.hourLimitKM }公里/小时</li>
            <li><label for="">超里程费：</label>${hour.overDriveFeeUnit }元/公里</li>
            <li><label for="">预授权：</label>${hour.carDeposit }元</li>
            <li><label for="">取车地点：</label>${hour.TerminalAddress }</li>
            <li><label for="">取车时间：</label>${hour.reserveDate }</li>
    	</ul>
    </div>
    <div class="mt30"><a class="yuanjiao green_btn" href="javascript:;" onclick="showid('qxyy');">取消预约</a></div>
</section>
<section>
	<div id="qxyy" class="ddxq" style="display:none;">
    	<h3>&nbsp;</h3>
        <div class="quxiao">
            <p class="qx_tit">取消原因</p>
            <p class="mt10">
            <select class="mt20" data-am-selected id="cancelDoc">
                <option value="选错车型">选错车型</option>
                <option value="选错站点">选错站点</option>
                <option value="选错时间">选错时间</option>
                <option value="暂时不需要用车">暂时不需要用车</option>
                <option value="其他">其他</option>
            </select>
            </p>
        </div>
        <div class="jump_btn"><a class="yuanjiao green_btn" href="javascript:void(0);" onclick="cancel(${hour.id});">确定</a></div>
    </div>
</section>
</body>
</html>
